<template>
  <div id="new-blind-box" v-if="inShow">
    <bindBoxCard :allDataList="allDataList" :activeIndex="activeIndex"></bindBoxCard>
    <div class="top-row">
      <span class="price-pnae" v-if="allDataList.list && allDataList.list[activeIndex] && allDataList.list[activeIndex].price">
        <span class="price-icon">￥</span>
        <span>{{allDataList.list && allDataList.list[activeIndex] ? allDataList.list[activeIndex].price : ''}}/个</span>
      </span>
      <div class="img-pane">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/new_blind_box/left_icon.png" alt="" class="left-icon" @click="prevImg" />
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/new_blind_box/right_icon.png" alt="" class="right-icon" @click="nextImg" />
      </div>
    </div>
    <div ref="my_swipe" :class="allDataList.list.length >= 3 ? 'my-swip' :'my-swip one-my-swip'">
      <van-tabs v-model="activeIndex" class="active-pane" swipe-threshold="3" @click="onTabClick">
        <van-tab  :title-class="activeIndex == index ? 'border-active-color' : ''" v-for="(item, index) in allDataList.list" :key="index" :name="index">
          <template #title>
            <img :src="item.activity_img_src" alt="" :class="allDataList.list.length >= 3 ? '' :'one-img'"/>
            <span class="name">{{ item.activity_name }}</span>
          </template>
        </van-tab>
        <van-tab title-class="space-row"></van-tab>
      </van-tabs>
    </div>
    <div class="bottom set-pc-style" :class="[this.fun.getPhoneEnv() == 3 ? 'pcStyle' : '']">
      <div class="explain" @click="clickExplain">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/new_blind_box/plain.png" alt="" />
        <span>盲盒说明</span>
      </div>
      <div :class="allDataList.list[activeIndex].show_status == 1 ? 'button-sty' : 'button-sty no-button-sty'" @click="clickUnpacking">立即开箱</div>
      <!-- <div class="button-sty" @click="clickUnpacking">立即开箱</div> -->
    </div>

    <van-popup v-model="unpackingShow" round position="bottom" :style="{ height: '80%' }">
      <unpackingGoods @cancalEvent="cancalEvent" :activeIndex="activeIndex" :allDataList="allDataList" v-if="unpackingShow"></unpackingGoods>
    </van-popup>

    <van-popup v-model="explainShow" round position="bottom" :style="{ height: '41%' }">
      <div class="popup-top">
        <span class="title">盲盒说明</span>
        <van-icon name="cross" class="close-icon" @click="clickClose" />
      </div>
      <div class="text" v-html="allDataList.blind_box_explain"></div>
    </van-popup>
  </div>
</template>

<script>
import index_controller from "./index_controller.js";
export default index_controller;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
::v-deep .my-swip .van-tabs__wrap {
  height: 100% !important;
}

::v-deep .my-swip .van-tabs__nav {
  background: none !important;
}

::v-deep .my-swip .border-active-color {
  border: 0.08rem solid #fd7383;
  padding: 0.3rem !important;
}

::v-deep .one-my-swip .van-tab {
  display: block;
  flex: 0;

  .one-img {
    width: 6.65rem !important;
  }
}

::v-deep .my-swip .van-tab {
  width: 7.55rem;
  height: 8.75rem;
  background: #fff;
  border-radius: 0.4rem;
  margin-left: 0.95rem;
  padding: 0.28rem;
  line-height: 1;

  img {
    margin: 0;
    width: 6.65rem;
    border-radius: 0.4rem;
    height: 6.55rem;
  }

  .name {
    // display: -webkit-box;
    font-size: 0.55rem;
    font-weight: 400;
    color: #333;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    line-height: 2.5;
    text-align: left;
  }
}

::v-deep .my-swip .space-row {
  width: 0 !important;
  margin-left: 0.5rem !important;
  opacity: 0;
}

::v-deep .my-swip .van-tab__text {
  height: 100%;
  // width: 100% !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

::v-deep .van-tabs__nav--line.van-tabs__nav--complete {
  padding-left: 0;
  padding-right: 0;
}

::v-deep .my-swip .van-tabs__line {
  display: none;
}

#new-blind-box {
  background: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/new_blind_box/bg.png") 0 -1rem;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
  min-height: 100vh !important;
  height: auto !important;

  .top-row {
    position: relative;
  }

  .img-pane {
    position: relative;

    .left-icon {
      width: 1.65rem;
      height: 1.65rem;
      position: absolute;
      left: 1.2rem;
      top: -5.8rem;
    }

    .right-icon {
      width: 1.65rem;
      height: 1.65rem;
      position: absolute;
      right: 1.4rem;
      top: -5.8rem;
    }
  }

  .price-pnae {
    padding: 0.3rem 0.7rem;
    color: #fd0000;
    background-color: rgba(255, 255, 255, 0.1);
    font-weight: bold;
    font-size: 1.05rem;

    .price-icon {
      font-size: 0.8rem;
    }
  }

  .active-pane::-webkit-scrollbar {
    display: none;
  }

  .active-pane {
    margin-top: 2.3rem;
    padding-bottom: 5rem;
  }

  .pcStyle {
    width: 375px !important;
  }

  .bottom {
    height: 3.75rem;
    background: #fff;
    border-radius: 1rem 1rem 0 0;
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    padding: 0.4rem 1.25rem;

    .explain {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      flex: 1;

      img {
        width: 1.2rem;
        height: 1.4rem;
        margin-bottom: 0.4rem;
      }

      span {
        display: flex;
        font-size: 0.5rem;
        font-weight: 400;
        color: #333;
      }
    }

    .no-button-sty {
      background: #a3a3a3 !important;
    }

    .button-sty {
      flex: 2.5;
      background: #fd7383;
      border-radius: 0.25rem;
      font-size: 1rem;
      font-weight: bold;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .popup-top {
    margin: 0.73rem 0.95rem 1.15rem 0;
    line-height: 1;

    .title {
      font-size: 1rem;
      font-weight: 400;
      color: #2b2b2b;
    }

    .close-icon {
      float: right !important;
    }
  }

  .text {
    margin: 0.8rem;
    text-align: left;
  }
}
</style>
